<template></template>
  <script setup>
import data from "../assets/GIS_Data/Wuhan_bridge.json";
import { onMounted, inject, onUnmounted } from "vue";
import { LineLayer, Popup } from "@antv/l7";
let map, scene, layer,popup;

onMounted(() => {
  // 获取地图变量
  map = inject("$scene_map").map;
  scene = inject("$scene_map").scene;
  // 初始化popup
  popup = new Popup({});
  scene.addPopup(popup);
  //加载桥梁数据
  initLayer();
  map.flyTo({
    center: [114.2663825, 30.51485229],
    zoom: 12.6,
    pitch: 40,
  });
});

const initLayer = () => {
  layer = new LineLayer({})
    .source(data)
    .size(10)
    .shape("arc3d")
    .color("name", ["red", "#5B8FF9", "#5CCEA1", "#F6BD16"]);
  scene.addLayer(layer);
  layer.on("click", (e) => {
    const { lng, lat } = e.lngLat;
    popup.setOptions({
      title: e.feature.properties.name,
      html: e.feature.properties.info,
      lngLat: {
        lng,
        lat,
      },
    });
  });
};

onUnmounted(() => {
  scene.removeLayer(layer);
  scene.removePopup(popup);
});
</script>
  <style scoped>
</style>
  